<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>淘宝 首页 </title>
    <!--优先使用IE最新版本和Chrome-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chome=1" />
    <!--视口--设备宽度--初始缩放比例--最小缩放比例--最大缩放比例--用户缩放-->
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <!--禁止浏览器自动的识别-电话号码-email--->
    <meta name="format-detection" content="telephone=no,email=no"/>
    <!--是否启用Web全屏-->
    <meta name="apple-mobile-web-app-capable" content='yes' />
    <meta name="apple-mobile-web-status-bar-style" content="normal|black|black-translucent">
    <!--设置苹果工具栏颜色-->
    <meta name="apple-mobile-web-app-status-bar-style" content='black' />
	 <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css" />
    <!--<script src="js/rem.js"></script>-->
    <link href="https://cdn.bootcss.com/Swiper/3.4.1/css/swiper.css" rel="stylesheet">
    <link rel="stylesheet" href="css/order.css">
   
    <script>
        // font - size
        (function () {
            size();
            window.onresize = function () {
                size();
            }
            function size() {
                var winW = document.documentElement.clientWidth || document.body.clientWidth;
                document.documentElement.style.fontSize =  (winW / 375)*100 + "px";
            }
        })()
    </script>
</head>
<body>
<div>
    <header class="header">
        <!-- 订单管理  -->
        <div class="orderManagement">
            <ul>
                <li class="back">&lt;</li>
                <li>订单管理</li>
                <li></li>
            </ul>
        </div>

        <!-- 导航 -->
        <div class="orderNavigation">
            <ul class="orderNavigationUl">
                <li class="active">全部</li>
                <li>待付款</li>
                <li><a >待发货</a></li>
                <li>待收货</li>
                <li >待评价</li>
            </ul>
        </div>
    </header>
    <section class="section">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="allOrder swiper-slide tab-content-1">
                    <!-- 全部 -->
                    <ul class=" orderSection">
                        <!--<li>
                            <a href="#">
                                <div class="shopName">
                                    <div>
                                        <img src="img/tmlogo.png" alt=""><span>店铺名称&nbsp;&gt;</span>
                                    </div>
                                    <p>交易成功</p>
                                </div>
                                <div class="priceName">
                                    <div>
                                        <img src="img/cont_03.png" alt="">
                                        <p>￥<span>0.00</span></p>
                                    </div>
                                    <p>共 <span style="color: orange">1</span> 件商品&emsp;&nbsp;&emsp;&nbsp;合计:&emsp;(含运费￥<span>0.00</span>)</p>
                                </div>
                            </a>
                            <div class="deleteBtn">
                                <p><span onclick="orderDelete()">删除订单</span><a href="#">评价</a></p>
                            </div>
                        </li>-->
                    </ul>
                </div>
                <div class="obligation swiper-slide tab-content-2">
                    <!-- 代付款 -->
                    <div>
                      <img src="img/shoppingcartImega.png" alt="">
                        <p>您还没有相关的订单</p>
                        <p>可以去看看有哪些想买的</p>
                        <p><a href="#">随便逛逛</a></p>
                    </div>
                </div>
                <div class="toBeShipped swiper-slide tab-content-2">
                    <!-- 代发货 -->
                    <div>
                        <!--<img src="img/shoppingcartImega.png" alt="">-->
                        <p>您还没有相关的订单</p>
                        <p>可以去看看有哪些想买的</p>
                        <p><a href="#">随便逛逛</a></p>
                    </div>
                </div>
                <div class="theReceipt swiper-slide tab-content-2">
                    <!-- 待收货 -->
                    <div>
                      <!--  <img src="img/shoppingcartImega.png" alt="">-->
                        <p>您还没有相关的订单</p>
                        <p>可以去看看有哪些想买的</p>
                        <p><a href="#">随便逛逛</a></p>
                    </div>
                </div>
                <div class="pendingEvaluation swiper-slide tab-content-2">
                    <!--  待评价  -->
                    <ul class="orderSection">
                        <li>
                            <a href="#">
                                <div class="shopName">
                                    <div>
                                        <img src="img/tmlogo.png" alt=""><span>店铺名称&nbsp;&gt;</span>
                                    </div>
                                    <p>交易成功</p>
                                </div>
                                <div class="priceName">
                                    <div>
                                        <img src="img/cont_03.png" alt="">
                                        <p>￥<span>0.00</span></p>
                                    </div>
                                    <p>共 <span style="color: orange">1</span> 件商品&emsp;&nbsp;&emsp;&nbsp;合计:&emsp;(含运费￥<span>0.00</span>)</p>
                                </div>
                            </a>
                            <div class="deleteBtn">
                                <p><span onclick="orderDelete()">删除订单</span><a href="#">评价</a></p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        
        
    </section>
</div>
		<div class="overlay">
			
		</div>
		
		<div class="confirm">
			<p>确认要删除该商品吗？</p>
			<button class="confirm_ok">确认</button>
			<button class="confirm_cancel">取消</button>
		</div>
		

</body>
</html>
<script src="https://cdn.bootcss.com/jquery/3.1.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/Swiper/3.4.1/js/swiper.js"></script>
<script src="js/order.js" type="text/javascript" charset="utf-8"></script>
<script>
	

	
    // tab 切换
$(function () {
    var mySwiper = new Swiper('.swiper-container', {
        onSlideChangeEnd: function (swiper) {
            var j=mySwiper.activeIndex;
            $('.orderNavigation li').removeClass('active').eq(j).addClass('active');
        }
    })
    /*列表切换*/
   $('.orderNavigation li').on('click', function (e) {
        e.preventDefault();
        //得到当前索引
        var i=$(this).index();
        $('.orderNavigation li').removeClass('active').eq(i).addClass('active');
        mySwiper.slideTo(i,false);
    });
});
    // 删除按钮
    function orderDelete(){
        $(".blackWrapper").css("display","block");
    }
    // 确认按钮
    function deleteShopSubmit(){
        $(".blackWrapper").css("display","none")

    }
    // 取消按钮
    function deleteShopOff(){
        $(".blackWrapper").css("display","none")

    }
</script>
